<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Task Management</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="tasks-v2.css">
</head>
<body>

	<div id="app">
		<h1>Tasks</h1>
		
		<input type="text" class="form-control" placeholder="New Task" v-model="newTask.title" v-on="keyup: addTask | key 'enter'">
		
		<ul class="list-group">
		<li class="list-group-item task" v-repeat="task : tasks" v-class="completed: task.completed">
			<input type="checkbox" v-model="task.completed"> {{ task.title }}
			<button class="remove-btn pull-right" v-on="click: removeTask(task)"><span class="glyphicon glyphicon-remove"></span></button>
		</li>
		</ul>
	</div>

    <script src="../../lib/vue/0.12.9/vue.min.js"></script>
    <script src="tasks-v5.js"></script>
</body>
</html>